<template>
  <el-dialog
    :visible.sync="visible"
    width="100%"
    :before-close="handle_close"
    append-to-body
  >
    <div class="dialog-container">
      <div class="toolbar">
        <div class="programme-choose">
          <span>选择方案：</span>
          <el-checkbox-group v-model="checkedList">
            <el-checkbox v-for="item in programmeList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <i class="el-icon-upload2 pointer" @click="handle_export"><span class="icon-text">导出</span></i>
        <i class="el-icon-printer pointer" v-print="'#claim-dialog-table-print'"><span class="icon-text">打印</span></i>
        <i class="el-icon-close pointer" @click="visible = false"><span class="icon-text">关闭</span></i>
      </div>
      <div id="claim-dialog-table-print">
        <!-- 收入认领 -->
        <div class="claim">
          <div class="title">收入认领</div>
          <div class="tableBox" style="margin-top: 20px;">
            <el-table
              :data="claimsTableData"
              style="width: 100%"
              border
              ref="table1"
              id="table1"
              :header-cell-style="{color:'#000', padding: '6px 0', 'font-size': '12px', 'font-weight': '500'}"
            >
              <el-table-column prop="title" align="center"></el-table-column>
              <el-table-column :label="programmeList[i-1]&&programmeList[i-1].label" align="center" v-for="(i, idx) in sortList" :key="idx">
                <el-table-column label="码号收入" :prop="`mh${i}`" align="center"></el-table-column>
                <el-table-column label="产数收入" :prop="`cs${i}`" align="center"></el-table-column>
                <el-table-column label="非码号非产数收入" :prop="`js${i}`" align="center" min-width="120"></el-table-column>
                <el-table-column label="主营合计" :prop="`zy${i}`" align="center"></el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 资源配置 -->
        <div class="resource">
          <div class="title">资源配置</div>
          <div class="tableBox" style="margin-top: 20px;">
            <el-table
              :data="resourcesTableData"
              style="width: 100%"
              border
              ref="table2"
              id="table2"
              :header-cell-style="{background: 'rgb(244,247,250)', color:'#000', padding: '6px 0', 'font-size': '12px', 'font-weight': '500'}"
            >
              <el-table-column prop="title" align="center" width="230"></el-table-column>
              <el-table-column :label="programmeList[i-1]&&programmeList[i-1].label" :prop="`resource${i}`" align="center" v-for="(i, idx) in sortList" :key="idx" width="160">
              </el-table-column>
            </el-table>
          </div>

        </div>        
      </div>

    </div>
  </el-dialog>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { claimsTableData, resourceTitle } from "../tableData.js"
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  data(){
    return {
      visible: false,
      checkedList: [], //选中的方案id
      programmeList: [], //方案
      sortList: [], //用于显隐表格中方案
      claimsTableData: JSON.parse(JSON.stringify(claimsTableData)),
      resourcesTableData: [],
    }
  },
  watch: {
    checkedList: {
      deep: true,
      handler(val){
        let arr = [];
        this.programmeList.forEach((it, i) => {
          if(val.indexOf(it.value) > -1) arr.push(i+1);
        })
        this.sortList = arr;
        this.$nextTick(() => {
          this.$refs.table1.doLayout();
          this.$refs.table2.doLayout();
        })
      }
    },
  },
  methods: {
    init(list){
      this.visible = true;
      this.programmeList = list;
      this.checkedList = list.map((it, i) => {
        this.sortList.push(i+1);
        return it.value;
      });
      this.getData();
    },
    getData(){
      let form = {
        logId1: this.checkedList[0],
        logId2: this.checkedList[1],
        logId3: this.checkedList[2],
        token: getCookie("token")
      }
      for(let i = 1; i <= 3; i++){
        if(form['logId' + i] === undefined) delete form['logId' + i] === undefined;
      }
      $budgetAPI.claimQueryPlanList(
        form,
        res => {
          this.alertError(res);
          if(res.code == 0){
            const { claim, claimKey, resourceKey, resources } = res.content;
            this.claimsTableData = claimKey.map((it,i) => {
              let obj = {
                title: this.claimsTableData[i].title,
                mh1: claim[1][it] !== undefined ? claim[1][it] : '',
                cs1: claim[2][it] !== undefined ? claim[2][it]: '',
                js1: claim[3][it] !== undefined ? claim[3][it]: '',
                zy1: claim[0][it] !== undefined ? claim[0][it]: '',
              }
              if(claim.length > 4){
                obj = {
                  ...obj,
                  mh2: claim[5][it] !== undefined ? claim[5][it] : '',
                  cs2: claim[6][it] !== undefined ? claim[6][it]: '',
                  js2: claim[7][it] !== undefined ? claim[7][it]: '',
                  zy2: claim[4][it] !== undefined ? claim[4][it]: '',
                }
              }
              if(claim.length > 8){
                obj = {
                  ...obj,
                  mh3: claim[9][it] !== undefined ? claim[9][it] : '',
                  cs3: claim[10][it] !== undefined ? claim[10][it]: '',
                  js3: claim[11][it] !== undefined ? claim[11][it]: '',
                  zy3: claim[8][it] !== undefined ? claim[8][it]: '',
                }
              }
              return obj;
            })
            
            this.resourcesTableData = resourceKey.map((it, i) => {
              let obj = {
                title: resourceTitle[i],
                resource1: resources[0][it] !== undefined ? resources[0][it] : '',
              }
              if(resources.length >= 2){
                obj = {
                  ...obj,
                  resource2: resources[1][it] !== undefined ? resources[1][it] : '',
                }
              }
              if(resources.length >= 3){
                obj = {
                  ...obj,
                  resource3: resources[2][it] !== undefined ? resources[2][it] : '',
                }
              }
              return obj;
            });
          }
        },
        err => {
          this.alertError(err);
        }
      );
    },
    handle_close(){},
    handle_export() {
      let xlsxParam = {
        raw: true
      }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
      let workbook = XLSX.utils.book_new();
      let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam),
          ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table2'), xlsxParam);
      XLSX.utils.book_append_sheet(workbook, ws1, '收入认领');
      XLSX.utils.book_append_sheet(workbook, ws2, '资源配置');
      let wbout = XLSX.write(workbook, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream;charset=utf-8"'
          }),
          '收入认领方案对比.xlsx'
          );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbOut);
      }
      return wbout;
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-container {
    width: 98%;
    margin: 0 auto;
    border: 1px solid rgb(219, 219, 219);
  }
  .toolbar {
    width: 100%;
    height: 48px;
    background-color: rgb(211,229,251) !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 10px 0 0;
    i {
      font-size: 20px;
      display: flex;
      align-items: center;
      margin: 0 10px;
    }
    .icon-text {
      font-size: 14px !important;
      margin-left: 2px;
    }
    .pointer {
      cursor: pointer;
      user-select: none;
      transition: color .2s;
      &:hover {
        color: blue;
      }
    }
    .text-btn {
      padding: 2px 15px;
      border-right: 1px solid rgb(219, 219, 219);
    }
    .programme-choose {
      display: flex;
      flex: 1;
      align-items: center; 
      margin-left: 30px;
    }
    /deep/ .el-input--prefix .el-input__inner {
      padding-left: 20px;
    }
  }
  .claim , .resource{
    padding: 20px 15px;
    .title {
      width: 100%;
      height: 40px;
      border-top: 1px solid rgb(56,150,242);
      border-bottom: 1px solid rgb(56,150,242);
      font-size: 18px;
      font-weight: 600;
      line-height: 36px;
      padding-left: 10px;
    }
  }
  /deep/ .el-dialog {
    margin: 0 auto !important;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      border-radius: 4px;
    }
  }
  /deep/ .el-table {
    .el-table__row {
      td {
        padding: 7.7px 0 !important;
      }
      .cell {
        font-size: 13px !important;
      }
    }
  }
</style>